<template>
  <div>
    <div class="center">
            <div class="upbox"><img src="https://yanxuan.nosdn.127.net/static-union/166272429389b370.gif" alt=""></div>
            <div class="downbox"><img src="https://yanxuan.nosdn.127.net/static-union/1662724293e8ddbb.gif" alt=""></div>
            <div class="lable">
              <span class="dollor">￥</span>
              <span class="number">100</span>
              <p class="numbone">新人权益限时领取</p>
              <p class="numbtwo">两天后失效，请尽快领取</p>
              <div class="get"><img src="https://yanxuan.nosdn.127.net/7c11a9b011d0c93d9924c8392cdce93c.png" alt=""></div>
            </div>
            <div class="tejia"><img src="https://yanxuan.nosdn.127.net/static-union/1662725498ac6bab.jpg" alt=""></div>
            <div></div>

    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.center{
    width: 100%;
    margin: auto;
    background-color: #FA4820;

}
.downbox{
  width: 100%;
  margin-top: -0.25rem;
}
.upbox {
  width: 100%;
  margin-top: -0.25rem;
}
.upbox,
.downbox,
 img{
  width: 100%;
  /* height: 12.5rem; */
}
.lable{
  width: 98%;
  margin: auto;
  height: 6.25rem;
  background: url(../../../assets/logo.png) center /98% no-repeat ;
  position: relative;
}

.dollor{
  position: absolute;
  color: white;
  top: 3.125rem;
  left: .625rem;
  font-size: 1.25rem;

}
.number{
  position: absolute;
  color: white;
  font-size: 2.5rem;
  font-weight: bold;
  top:1.875rem ;
  left: 1.5625rem;
}
.numbone{
  position: absolute;
  color: white;
  top: 1.875rem;
  left: 6.25rem;
  font-size: 1.25rem;
}
.numbtwo{
  position: absolute;
  color: white;
  top:3.4375rem;
  left: 6.25rem;
  font-size: .625rem;
}
.get{
  width: 3.4375rem;
  height:3.4375rem;
  position: absolute;
  top:1.25rem;
  right:1.25rem
}
.get img{
  width: 100%;
  height: 100%;
}
</style>